<template>
	<view class="box">
		<view @click="refresh">点击强制刷新</view>
		<view class="nuter">
			<view :class="target==0?'active':''" @click="setIndex(0)" data-index="0">
				实时
			</view>
			<view :class="target==1?'active':''" @click="setIndex(1)" data-index="1">
				历史
			</view>

		</view>
		<swiper :style="{ height: swiperHeight }" :duration="500" :current="thisindex" :data-index='thisindex'
			@change="toggle" :show-indicators="false">
			<swiper-item>
				<!-- 按顺序对应第一个的内容 -->
				<view v-for="(match, index) in livedata" :key="index" class="match-info">
					<!-- 第一行：比赛编号、联赛名称、日期时间 -->
					<view class="info-row header-row">
						<text class="match-num">{{ match.matchNumStr || match.matchNum }}</text>
						<text class="league-name">{{match.leagueName}}</text>
						<text class="match-time">{{ match.matchDate }} {{ match.matchTime }}</text>
					</view>
					<!-- 第二行：主队 vs 客队 -->
					<view class="info-row teams-row">
						<text class="home-team">{{ match.homeTeamAbbName }}</text>
						<text class="vs-text">vs</text>
						<text class="away-team">{{ match.awayTeamAbbName }}</text>
					</view>
					<!-- 第三行：比分和胜率 -->
					<view class="info-row scores-row">
						<view class="scores-left">
							<text class="score-item">全场: {{ match.sectionsNo999 || '0' }}</text>
							<text class="score-item">半场: {{ match.sectionsNo1 || '0' }}</text>
						</view>
						<view class="odds-right">
							<text class="odds-text">胜:{{ match.h?match.h:"-" }} 平:{{ match.d?match.d:"-" }} 负:{{ match.a?match.a:"-" }}</text>
							<text class="status-text">{{match.matchStatusName}}</text>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<!-- 按顺序对应第二个的内容 -->
				<view v-for="(match, index) in data" :key="index" class="match-info">
					<!-- 第一行：比赛编号、联赛名称、日期 -->
					<view class="info-row header-row">
						<text class="match-num">{{ match.matchNumStr }}</text>
						<text class="league-name">{{match.leagueName}}</text>
						<text class="match-time">{{ match.matchDate }}</text>
					</view>
					<!-- 第二行：主队 vs 客队 -->
					<view class="info-row teams-row">
						<text class="home-team">{{ match.homeTeam }}</text>
						<text class="vs-text">vs</text>
						<text class="away-team">{{ match.awayTeam }}</text>
					</view>
					<!-- 第三行：比分和胜率 -->
					<view class="info-row scores-row">
						<view class="scores-left">
							<text class="score-item">全场: {{ match.sectionsNo999 || '0' }}</text>
							<text class="score-item">半场: {{ match.sectionsNo1 || '0' }}</text>
						</view>
						<view class="odds-right">
							<text class="odds-text">胜:{{ match.h?match.h:"-" }} 平:{{ match.d?match.d:"-" }} 负:{{ match.a?match.a:"-" }}</text>
						</view>
					</view>
				</view>
			</swiper-item>

		</swiper>

	</view>
</template>

<script>
	import {
		refreshMatchResultV1,getMatchResultV1,getMatchDataPageListV1
	} from '@/api/public.js'
	export default {
		data() {
			return {
				kefu:false,
				swiperHeight: '0px', // 初始高度，可根据实际情况调整
				// 当前样式
				target: 0,
				// 当前item位置
				thisindex: 0,
				loading: false,
				data: [],
				livedata: [],
				// 乱码检测相关
				lastRefreshTime: 0,
				refreshInterval: 30000 // 30秒内不重复刷新
			}
		},
		watch: {
			// 监听数据变化，当数据变化时更新swiper高度
			livedata() {
				this.heightint()
				// 检测数据是否有乱码
				this.checkDataEncoding()
			},
			data() {
				this.heightint()
				// 检测数据是否有乱码
				this.checkDataEncoding()
			}
		},
		methods: {
			show(){
				 this.$refs.popup.open('top')
			},
			refresh() {
				uni.showLoading({
					title: '强制刷新中',
					mask: true
				});
				refreshMatchResultV1().then(res => {
					
				})
				 setTimeout(() => {
				            this.getdata();
				        }, 5000); // 5000 毫秒即 5 秒
			},
			getdata() {
				uni.showLoading({
					title: '数据获取中',
					mask: true
				});
				let that = this;
				getMatchResultV1().then(res=>{
					console.log('历史数据:', res)
					uni.hideLoading();
					if (res.data.success) {
						that.data = res.data.value.matchResult
						console.log('历史数据数量:', that.data.length)
					}
				})
				getMatchDataPageListV1().then(res=>{
					uni.hideLoading();
					if (res.data.success) {
						that.livedata = res.data.value
						console.log('实时数据数量:', that.livedata.length)
					}
				})
				 uni.hideLoading();
				 this.heightint();
			},
			onShareAppMessage: function() {
				 return {
				 	title: this.miniHomeRemark,
				 	imageUrl: this.miniHomeImg,
				 	 path: '/pages/kaijiang?kaijiang'
				 };
				
			},
			onShareTimeline: function() {
				return {
					title: this.miniHomeRemark,
					imageUrl: this.miniHomeImg,
					path: 'pages/kaijiang/kaijiang'
				};
			},
			// 切换触发的事件
			toggle(e) {
				let index = e.detail.current
				this.target = index
				this.heightint()

			},
			heightint() {
				if (this.thisindex == 0) {
					this.swiperHeight = `${(this.livedata.length+1) * 95 + 93}px`
				} 
				if (this.thisindex == 1)  {
					this.swiperHeight = `${(this.data.length+2) * 95 + 93}px`
				}
			},
			// 点击nav控制下面的展示
			setIndex(index) {
				this.thisindex = index
				this.heightint()
			},
			
			// 检测数据编码，检查是否有乱码
			checkDataEncoding() {
				// 检查是否在刷新间隔内
				const now = Date.now()
				if (now - this.lastRefreshTime < this.refreshInterval) {
					return
				}
				
				// 检测livedata中的中文乱码
				if (this.livedata && this.livedata.length > 0) {
					const hasGarbledText = this.livedata.some(match => {
						// 检查关键字段是否包含乱码字符
						const fieldsToCheck = [
							match.leagueName,
							match.homeTeamAbbName,
							match.awayTeamAbbName,
							match.matchStatusName
						]
						
						return fieldsToCheck.some(field => {
							if (!field || typeof field !== 'string') return false
							// 检测常见的乱码模式
							return this.isGarbledText(field)
						})
					})
					
					if (hasGarbledText) {
						console.warn('检测到中文乱码，自动刷新数据')
						this.lastRefreshTime = now
						this.autoRefreshData()
					}
				}
				
				// 检测data中的中文乱码
				if (this.data && this.data.length > 0) {
					const hasGarbledText = this.data.some(match => {
						// 检查关键字段是否包含乱码字符
						const fieldsToCheck = [
							match.leagueName,
							match.homeTeam,
							match.awayTeam
						]
						
						return fieldsToCheck.some(field => {
							if (!field || typeof field !== 'string') return false
							// 检测常见的乱码模式
							return this.isGarbledText(field)
						})
					})
					
					if (hasGarbledText) {
						console.warn('检测到中文乱码，自动刷新数据')
						this.lastRefreshTime = now
						this.autoRefreshData()
					}
				}
			},
			
			// 判断文本是否包含乱码
			isGarbledText(text) {
				if (!text || typeof text !== 'string') return false
				
				// 检测常见的乱码模式
				const garbledPatterns = [
					/[\uFFFD\u0000-\u001F\u007F-\u009F]/, // 替换字符和控制字符
					/[\u00C0-\u00FF]/, // 拉丁扩展字符（可能是编码错误）
					/[\u0100-\u017F]/, // 拉丁扩展A
					/[\u0180-\u024F]/, // 拉丁扩展B
					/[\u20AC\u20A0-\u20CF]/, // 货币符号
					/[\u{1F000}-\u{1F6FF}]/u, // 表情符号（可能是编码错误）
					/[\u{1F900}-\u{1F9FF}]/u, // 补充符号和图标
					/[^\u4e00-\u9fa5a-zA-Z0-9\s\u3000-\u303f\uff00-\uffef\u2000-\u206f\u3400-\u4dbf]/, // 非正常中英文字符
					/\?{2,}/, // 连续问号（常见乱码）
					/\*{2,}/, // 连续星号
					/\{2,\}/, // 连续大括号（常见乱码）
					/[\u0000-\u001F]/, // 控制字符
					/[\u007F-\u009F]/ // 扩展控制字符
				]
				
				// 检查是否包含乱码模式
				for (const pattern of garbledPatterns) {
					if (pattern.test(text)) {
						return true
					}
				}
				
				// 检查中文字符是否正常（应该包含在正常范围内）
				const chineseChars = text.match(/[\u4e00-\u9fa5]/g)
				if (chineseChars && chineseChars.length > 0) {
					// 如果包含中文字符，检查是否有异常字符混合
					const abnormalChars = text.match(/[^\u4e00-\u9fa5a-zA-Z0-9\s\u3000-\u303f\uff00-\uffef\u2000-\u206f\u3400-\u4dbf]/g)
					if (abnormalChars && abnormalChars.length > 0) {
						// 如果异常字符比例过高，可能是乱码
						const abnormalRatio = abnormalChars.length / text.length
						if (abnormalRatio > 0.3) {
							return true
						}
					}
				}
				
				return false
			},
			
			// 自动刷新数据（静默刷新，不显示loading）
			async autoRefreshData() {
				try {
					console.log('开始自动刷新数据...')
					this.refresh();
					// 重新获取数据
					
					
					console.log('自动刷新数据完成')
				} catch (error) {
					console.error('自动刷新数据失败:', error)
					// 如果自动刷新失败，可以尝试手动刷新
					
				}
			}
		},
		onLoad() {
			this.getdata()
		}
	}
</script>

<style lang="scss">
	/* 整体页面容器样式 */
	.box {
		padding: 0 10px 20px 10px;
		background-color: #f5f5f5;
		font-family: Arial, sans-serif;
		min-height: 100vh;
		box-sizing: border-box;
	}

	/* 强制刷新按钮样式 */
	.box>view:first-child {
		padding: 12px 10px;
		background-color: #ff4242;
		color: white;
		border-radius: 0;
		margin: 0 -10px 10px -10px;
		text-align: center;
		font-weight: 500;
		font-size: 14px;
	}

	/* 用于切换实时/历史的导航栏样式 */
	.nuter {
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		border-radius: 5px;
		padding: 4px 0;
		margin-bottom: 10px;
	}

	.nuter>view {
		padding: 4px 10px;
		cursor: pointer;
		font-size: 14px;
	}

	/* 选中的导航栏项样式 */
	.nuter>view.active {
		color: #007aff;
		border-bottom: 2px solid #007aff;
	}

	/* swiper样式 */
	swiper {
		// height: 300px;
		border-radius: 5px;
		overflow: visible;
		margin-bottom: 20px;
		width: 100%;
	}

	/* swiper-item内每个比赛信息容器样式 */
	.match-info {
		padding: 8px 10px;
		background-color: white;
		border-radius: 6px;
		margin-bottom: 8px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
		position: relative;
		z-index: 1;
	}

	/* 每行信息的通用样式 */
	.info-row {
		display: flex;
		align-items: center;
		margin-bottom: 4px;
	}

	/* 第一行：头部信息 */
	.info-row.header-row {
		justify-content: space-between;
		margin-bottom: 6px;
	}

	.match-num {
		font-size: 11px;
		color: #999;
		font-weight: 500;
	}

	.league-name {
		font-size: 12px;
		color: #666;
		font-weight: 600;
	}

	.match-time {
		font-size: 11px;
		color: #999;
	}

	/* 第二行：球队信息 */
	.info-row.teams-row {
		justify-content: center;
		margin-bottom: 6px;
		gap: 8px;
	}

	.home-team, .away-team {
		font-size: 13px;
		font-weight: 600;
		color: #333;
	}

	.vs-text {
		font-size: 11px;
		color: #999;
		font-weight: 400;
	}

	/* 第三行：比分和胜率 */
	.info-row.scores-row {
		justify-content: space-between;
		margin-bottom: 0;
	}

	.scores-left {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.score-item {
		font-size: 11px;
		color: #666;
	}

	.odds-right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 2px;
	}

	.odds-text {
		font-size: 11px;
		color: indianred;
		font-weight: 500;
	}

	.status-text {
		font-size: 10px;
		color: #999;
	}

</style>